// tadolist函数方式

import {useState} from 'react'

const List = (props)=>{ //父组件传来的
// console.log(props.list.list);

  const [list,setList] = useState(props)

   // 单删
  let del =(index)=>{
    // console.log(index);
    props.list.list.splice(index,1)
    setList({
      list,list:props.list.list
    })

  }

  // 清除
  let removeall=()=>{
    // props.list.use.length=0
    // this.setState({
    //   list: props.list
    // })

    props.list.list.length=0
    setList({
      list,list:props.list.list
    })

  }

  return (
    <>
        <ul>
          {
            props.list.list.length ? props.list.list.map((item,index) => {
              return <div key={index}>
                <li className='li' >
                  <span>{index+1}</span>
                  <span className='span'>| {item.name}</span>
                  <span className='span2' onClick={()=>del(index)}>X</span>
                </li>
                <div className='div2'></div>
              </div>
            }) : <h1>暂无待办事项</h1> //三元表达式判断没有数据时显示 暂无待办事项
          }
        </ul>
        <div className='z2'>
          <div className='q4'>总数：</div>
          <div className='q5'>{props.list.list.length}</div>
          <div className='q6' onClick={removeall}>清除</div>
        </div>
    </>
  )

}

export default List
